<template>
  <teleport to="body">
    <div v-if="visible" class="global-upload-modal">
      <div class="upload-progress-container">
        <el-progress :percentage="uploadPercentage" :status="uploadStatus"></el-progress>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue';
import { ElProgress } from 'element-plus';

const visible = ref(false);
const uploadPercentage = ref(0);
const uploadStatus = ref('');

// 暴露一个方法，以便在上传开始时打开模态框
function openModal() {
  visible.value = true;
}

// 暴露一个方法，以便在上传结束时关闭模态框
function closeModal() {
  visible.value = false;
  uploadPercentage.value = 0; // 重置上传进度
  uploadStatus.value = '';
}

// 暴露一个方法，以便更新上传进度
function updateProgress(percentage, status) {
  uploadPercentage.value = percentage;
  uploadStatus.value = status;
}

// 将模态框控制方法暴露给外部
defineExpose({
  openModal,
  closeModal,
  updateProgress,
});
</script>

<style scoped>
.global-upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.upload-progress-container {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>